<template>
  <div class="p-4">
    <GrowCard :loading="loading" class="enter-y" />
    <div class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full">
      <div style="margin-top: 15px">
        <span style="padding: 10px">时间范围</span>
        <RangePicker
          v-model:value="dateValue"
          :presets="rangePresets"
          :placeholder="['开始日期', '结束日期']"
          @change="handleDateChange"
        />
      </div>
    </div>
    <Card title="总访问量趋势图" style="margin-top: 15px; margin-bottom: 15px">
      <p>
        <VisitAnalysis ref="pvRef" />
      </p>
      <!--    <p v-if="activeKey === 'tab2'">-->
      <!--      <VisitAnalysisBar />-->
      <!--    </p>-->
    </Card>
    <!--    <SiteAnalysis ref="pvRef" class="!my-4 enter-y" :loading="loading" />-->
    <div class="md:flex enter-y">
      <PvSourcePie ref="pvSourceRef" class="md:w-1/3 w-full" :loading="loading" />
      <GoodsTop
        ref="topGoodsRef"
        title="热门商品Top5：(单位：浏览次数)"
        top-type="goods_detail"
        class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full"
        :loading="loading"
      />
      <GoodsTop
        ref="topNewsRef"
        title="热门新闻Top5：(单位：浏览次数)"
        top-type="news_detail"
        class="md:w-1/3 w-full"
        :loading="loading"
      />
      <!--      <VisitRadar class="md:w-1/3 w-full" :loading="loading" />-->
      <!--      <VisitSource class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" />-->
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import GrowCard from './components/GrowCard.vue';
  // import SiteAnalysis from './components/SiteAnalysis.vue';
  import PvSourcePie from './components/PvSourcePie.vue';
  import GoodsTop from '@/views/dashboard/analysis/components/GoodsTop.vue';
  import { Card, RangePicker } from 'ant-design-vue';
  import dayjs, { Dayjs } from 'dayjs';
  import VisitAnalysis from '@/views/dashboard/analysis/components/VisitAnalysis.vue';

  const now = dayjs();
  const loading = ref(true);
  const topGoodsRef = ref();
  const topNewsRef = ref();
  const pvSourceRef = ref();
  const pvRef = ref();

  const dateValue = ref<[Dayjs, Dayjs]>([now.add(-14, 'd'), now]);
  const rangePresets = ref([
    { label: '最近一周', value: [now.add(-7, 'd'), now] },
    { label: '最近两周', value: [now.add(-14, 'd'), now] },
    { label: '最近30天', value: [now.add(-30, 'd'), now] },
    { label: '最近90天', value: [now.add(-90, 'd'), now] },
  ]);

  function handleDateChange(value: [Dayjs, Dayjs], dateString: [string, string]) {
    topGoodsRef.value.statPvSource(dateString[0], dateString[1]);
    topNewsRef.value.statPvSource(dateString[0], dateString[1]);
    pvSourceRef.value.statPvSource(dateString[0], dateString[1]);
    pvRef.value.statPv(dateString[0], dateString[1]);
  }

  const init = function () {
    topGoodsRef.value.statPvSource(
      dateValue.value[0].format('YYYY-MM-DD'),
      dateValue.value[1].format('YYYY-MM-DD'),
    );
    topNewsRef.value.statPvSource(
      dateValue.value[0].format('YYYY-MM-DD'),
      dateValue.value[1].format('YYYY-MM-DD'),
    );
    pvSourceRef.value.statPvSource(
      dateValue.value[0].format('YYYY-MM-DD'),
      dateValue.value[1].format('YYYY-MM-DD'),
    );
    console.log(pvRef.value.pvChildRef);
    pvRef.value.statPv(
      dateValue.value[0].format('YYYY-MM-DD'),
      dateValue.value[1].format('YYYY-MM-DD'),
    );
  };
  setTimeout(() => {
    init();
    loading.value = false;
  }, 1000);
</script>
